<script>
  /*
      一、小程序启动与运行

              宿主App会为小程序展示一个固定的启动页面 （包含小程序的图标、名称 和 加载提示图标）

              此时宿主App 会在背后依次完成：  下载小程序代码包---》 加载小程序代码包----》初始化小程序首页


                    图示：

                          https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/50119a373f6845168858893e2857a52b~tplv-goo7wpa0wc-quality:q75.awebp



              ★、用户点击打开小程序时

                      宿主App会判断本地是否有缓存的小程序代码包。

                          ①、本地没有缓存的小程序代码包：  下载小程序代码包---》 加载小程序代码包

                          ②、本地有缓存的小程序代码包：  直接加载小程序代码包


                      图示：

                            https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/67b97ff2b45744709cf91eb80a1e45c2~tplv-goo7wpa0wc-quality:q75.awebp
  */

  /*
      二、小程序初始化

              初始化小程序分为 "逻辑线程"  和 "视图线程"  两个线程的初始化，在小程序包准备好之后，两个线程会并行工作。

                   ①、逻辑线程：  运行逻辑层代码，也就是js代码

                   ②、视图线程：  用于展示页面，也就是ttml 代码对应的页面呢结构。


              1、视图层加载流程：

                    ①、加载基础库 (基础库会提供小程序视图层的运行环境，比如 view、text等各种内置组件。)

                    ②、加载  App.ttss 的编译产物。

                    ③、加载入口页面对应的 sjs/ttml/ttss 的编译产物

                    ④、加载完毕后，等待逻辑层的 init data.


                          图示：

                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/01-5935462588436449.png


              2、逻辑层加载流程

                    ①、加载基础库  (基础库会提供小程序运行时所需要的基础环境，比如App、Page等方法和 tt.getStorage等API)

                    ②、创建App

                            a、加载开发者的App.js  ，创建App实例

                            b、依次触发 App.onLaunch 和 App.onShow 连个生命周期


                           图示：

                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/02-6987354185031904.png

              3、创建Page

                      ①、逻辑层加载开发者的 page.js ，创建Page实例，将 init data 发送到视图层

                      ②、视图层收到 init data 后，开始渲染

                      ③、于此同时逻辑层依次执行 Page 的 onLoad 和 onShow 两个生命周期

                      ④、视图渲染层渲染完毕后会通知逻辑层，逻辑层收到通知，触发 onReady 生命周期

                      ⑤、页面完成初次渲染，得到FP

                           图示：

                              https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/03-6048942700483533.png

  */
  /*
      三、setData 运行原理

              通常开发者会在 onLoad 中动态获取数据，比如通过 tt.request,或者 tt.getStorage 等，然后再 setData。

                    图示：

                           https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/04-7888893346675816.png
                           
                           
                      ①、逻辑层会发送经过 diff 后的 data到视图层

                      ②、视图层收到 data 之后会触发页面的重新渲染，得到 FMP

                      ③、渲染完毕后会通知逻辑层页面渲染完成。

                      ④、逻辑层收到通知后会触发 setData callback


                    图示：

                    
                开发者可以通过 setData触发页面的更新，更新流程和 onLoad 中的 setData 流程类似。
  */


   /*
      四、总结

              介绍完小程序启动时和运行时的流程，你可以围绕小程序的 "启动流程" 和 "运行流程"进行相对应优化。
   */
</script>